<template>
	<view class="body p30">
		<block v-if="list.length > 0">
			<view
				class="p40 bg-white br32 mb40 section"
				v-for="(item, index) in list"
				:key="index">
				<view class="program-card d-s-c pb40 mb40">
					<view class="program-image br28 mr35 d-c-c white">
						<i class="iconfont icon-maobi f68"></i>
					</view>
					<view class="program-info">
						<view class="program-title f34 fb mb15 vertical">
							{{ item.courseName }}
						</view>
						<view class="program-date f28 mb30 d-s-c">
							<i class="iconfont icon-rili mr15"></i>
							2025-07-08 至 2025-08-31
						</view>
						<view class="program-price f40">
							<span>¥{{ item.userPay }}/天</span>
						</view>
					</view>
				</view>
				<view class="form-group mb40" v-if="member[0]">
					<label class="mb20 f30">选择学员</label>
					<picker
						mode="selector"
						:range="member"
						:value="index"
						range-key="studentName"
						class="br24 f30"
						@change="setI(index, $event)">
						<view class="d-b-c ww100 p30">
							<view class="" v-if="index == -1">选择学员</view>
							<view class="" v-else>
								{{ member[item.i].studentName }}
							</view>
							<u-icon name="arrow-down" size="15"></u-icon>
						</view>
					</picker>
				</view>
				<view
					class="btn btn-primary white pt30 pb30 pl40 pr40 br50 fb f32"
					@click="topay(item)">
					立即报读
				</view>
			</view>
		</block>
		<u-empty mode="list" v-else marginTop="30vh"></u-empty>
		<tabbar :active="2"></tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			member: [],
			index: 0,
		};
	},
	onLoad() {
		this.getList();
		this.getMember();
	},
	methods: {
		canEnrollNow() {
			const now = new Date();
			const day = now.getDay(); // 0是星期日，1是星期一，... 6是星期六
			const hour = now.getHours();
			const minute = now.getMinutes();

			// 判断是否为工作日（星期一到星期五）
			const isWeekday = day >= 1 && day <= 5;

			// 判断是否在上午9点（09:00）到下午5点（17:00）之间
			const isInTimeRange =
				(hour > 9 || (hour === 9 && minute >= 0)) &&
				(hour < 17 || (hour === 17 && minute === 0));

			return isWeekday && isInTimeRange;
		},
		topay(item) {
			// return this.$showToast('人工核对信息中，如需报名请与招生老师联系，如需获取联系方式回复电话即可。')
			if (this.member.length == 0)
				return this.$showToast("请先填写子女信息");
			// if (this.boolNum())
			// 	return this.$showToast("请在2025年6月18号12点开始报读");
			// return;
			this.jump(
				`/pages/order/pay?item=${encodeURIComponent(
					JSON.stringify(item)
				)}&student=${encodeURIComponent(
					JSON.stringify(this.member[item.i])
				)}`
			);
		},
		boolNum() {
			const time1 = new Date("2025-08-18 12:00:00");
			const time2 = new Date();
			return time1 > time2;
		},
		setI(i, e) {
			this.list[i].i = e.detail.value;
			// console.log(i, e);
		},
		async getList() {
			const res = await this.$request({
				url: this.$api.courseList,
			});
			res.list.map((item) => (item.i = 0));
			this.list = res.list;
			console.log(this.list);
		},
		async getMember() {
			let res = await this.$request({
				url: this.$api.parent,
				data: {
					parentId: uni.getStorageSync("user").id || false,
				},
			});
			this.member = res;
		},
	},
};
</script>

<style scoped lang="scss">
.form-group {
	label {
		display: block;
		color: #2c3e50;
	}
	picker {
		border: 1px solid #e0e7ff;
		background: #f8faff;
	}
}
.btn {
	background: linear-gradient(to right, #3498db, #2ecc71);
	text-align: center;
	display: block;
	width: 100%;
	border: none;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
}
.program-price {
	font-weight: bold;
	color: #e74c3c;
	.action-btn {
		color: #3498db;
		background: rgba(52, 152, 219, 0.1);
	}
}
.program-date {
	.iconfont {
		color: #3498db;
	}
	.date-badge {
		display: inline-block;
		background: #fff8e1;
		color: #f39c12;
	}
}
.program-title {
	color: #2c3e50;
}
.program-date {
	color: #7f8c8d;
}
.program-image {
	width: 180rpx;
	height: 180rpx;
	background: linear-gradient(135deg, #ff9a9e, #fad0c4);
	flex-shrink: 0;
	box-shadow: 0 10rpx 30rpx rgba(116, 185, 255, 0.3);
}
.program-card {
	border-bottom: 1px solid #f0f5ff;
}
.section {
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
}
</style>
